<template>
  <default-layout>
    <header-close :text="detail.title" slot="header"></header-close>
    <div slot="main">
      <div class="detail">
        <div class="title">{{detail.esa201}}</div>
        <div class="con">{{detail.esa202}}</div>
        <div class="desc">
          <span>{{$dateFormat(detail.aae036).format('YYYY-MM-DD HH:mm:ss')}}</span>
          <span :class="Number(detail.esb001) === 1 ? 'pending' : 'primary'">{{Number(detail.esb001) === 1 ? '未回复' : '已回复'}}</span>
        </div>
      </div>
      <div class="response" v-if="Number(detail.esb001) === 2">
        <div class="con">{{detail.esb002}}</div>
        <div class="desc">
          <span>{{$dateFormat(detail.esb004).format('YYYY-MM-DD HH:mm:ss')}}</span>
        </div>
      </div>
    </div>
  </default-layout>
</template>
<script>
  import HeaderClose from '../../components/header-close/header-close.vue'
  import DefaultLayout from '../../layouts/default-layout/default-layout'
  import {STORAGE_TYPE} from '../../common/js/config'
  import {parse} from '../../common/js/util'
  /*
  * title: '主任信箱',
    发送标题: val.esa201,
    发送内容: val.esa202,
    发送时间: val.aae036,
    状态: Number(val.esb001),
    回复内容: val.esb002,
    回复时间: val.esb004
  * */

  export default {
    components: {
      DefaultLayout,
      HeaderClose},
    data() {
      return {
        detail: {}
      }
    },
    created() {
      let detail = parse(sessionStorage.getItem(STORAGE_TYPE.suggest))
      if (detail) {
        this.detail = detail
      } else {
        this.$router.replace({name: 'home'})
      }
    }
  }
</script>
<style lang="scss" scoped>
  @import "../../common/style/variable";
  .detail{
    padding: 0 .2rem;
    background: #fff;
    .title{
      padding: .15rem 0;
      font-size: .34rem;
    }
    .desc{
      padding: .15rem 0 .3rem 0;
    }
  }
  .con{
    font-size: .3rem;
    line-height: .45rem;
    white-space: pre-wrap;
    padding: .2rem 0;
    color: #333;
  }
  .desc{
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #666;
    padding: .15rem 0 .15rem 0;
  }
  .pending{
    color: $danger;
  }
  .response{
    position: relative;
    background: #ededed;
    padding: .2rem;
    &:after{
      content: '';
      position: absolute;
      width: .3rem;
      height: .3rem;
      background: #ededed;
      right: .4rem;
      bottom: 100%;
      transform-origin: 100% 100%;
      transform: rotate(-45deg);
    }
  }
  .primary{
    color: $primary;
  }
</style>
